<template>
  <div class="detail">
    <div class="indexSwipe">
      <sticky>
        <icon class="iconExit" name="arrow-left" @click="onClickLeft" />
      </sticky>
      <img style="" :src="dalImg(product.data?.coverImage) " alt="" />
    </div>

    <div class="goodsBox">
      <div class="goods">
        <div class="goodsPrice">￥{{ product.data?.price }}</div>
        <div class="goodsName">{{ product.data?.name }}</div>
        <div class="point">
          <span>赠积分</span>
        </div>
        <coupon-cell
          @click="showList = true"
        />
        <cell is-link title="更多选项" @click="show = true" />
        <action-sheet
          v-model:show="show"
          :actions="actions"
          @select="onSelect"
        />
      </div>
    </div>

    <h3>商品详情</h3>
    <div
      style="max-width: 100%"
      class="content"
      v-html="product.data?.content"
    ></div>
    <action-bar>
      <action-bar-icon icon="shop-o" text="首页" @click="toHome" />
      <action-bar-icon icon="chat-o" text="客服"  />
      <action-bar-icon icon="cart-o" text="购物车" :badge="cartCount" @click="toCart" />
      <action-bar-button
        type="danger"
        text="立即购买"
        @click="buy(product.data)"
      />
    </action-bar>
  </div>
</template>

<script setup>
import { ref,inject } from "vue";
import {
  Cell,
  Icon,
  Toast,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
  CouponCell,
  ActionSheet,
  Sticky,
} from "vant";
import { useRoute, useRouter } from "vue-router";
import { loadProductByIdAPI } from "../services/products";
import { useCart } from "../store/features/cart";
import { dalImg } from "../utils/tools";

const store = useCart();
const { query } = useRoute();
const { push } = useRouter();
const router = useRouter();
const product = ref({});
const cartCount = inject("cartCount");

//加载数据
loadProductByIdAPI(query.id).then((res) => {
  product.value.data = res.data;
  // console.log(product.value.data.coverImage);
});
//跳转
const toHome = () => {
  push({ name: "Index" });
};
const toCart = () => {
  push({ name: "Cart" });
};
//加入购物车
const buy = async (item) => {
  store.addToCart(item.id, 1, item.price);
  cartCount.value ++;
  Toast({ message: "加入购物车成功" });
};
const onClickLeft = () => {
  router.go(-1);
};

const show = ref(false);
const actions = [{ name: "不买了" }, { name: "不好看" }, { name: "选项三" }];
const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  Toast(item.name);
};
</script>

<style scoped lang="scss">
.detail{
  padding-bottom: 60px;
}
.indexSwipe {
  position: relative;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  max-height: 320px;
  border-radius: 12px;
  display: flex;
  justify-items: center;
  align-items: center;

  text-align: center;
  img{max-height:300px;
    margin: 0 auto;
  }
}
.iconExit {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 99;
  font-size: 1.2rem;
  background-color: #aaa9a9;
  color: white;
  border-radius: 30%;
}
.goodsBox {
  width: 97%;
  margin: 10px auto;
  border-radius: 8px;
  background-color: #fff;
  padding: 8px;
  .goods {
    padding-top: 15px;
    .goodsName {
      height: 36px;
      margin-top: 10px;
      line-height: 18px;

      text-align: start;
      font-size: 16px;
      font-weight: bold;
      overflow: hidden;
    }
    .goodsPrice {
      width: 160px;
      text-align: start;
      font-size: 24px;
      font-weight: bold;
      color: rgb(207, 10, 44);
    }
    .point {
      margin: 9px 0 20px 0;
      width: 160px;
      text-align: start;
      font-size: 12px;
      color: rgb(207, 10, 44);
      span {
        border: 1px solid rgb(206, 110, 126);
        border-radius: 3px;
      }
    }
  }
}
</style>
